

import main from '../../main';
import { apiGetOrderByColumn } from '../../api';
import Fullscreen from '../../components/fullscreen';
import { Empty, Pagination, Popover, Table, Tag } from '@arco-design/web-react';
import { IconRight } from '@arco-design/web-react/icon';
import { useEffect, useState } from 'react';
import { dictTag, } from '../../utils/utils';
import { keepCopy, tooltipEllipsis60 } from '../../components/tableColumn';
import { getDict } from '../../utils/utils';
import { CardDetailWalletOrder } from '../../types';
import dayjs from 'dayjs';
import LoadingMask from '../../components/loadingMask';
interface Props {
    iccid: string
}
// 系统开关 状态
const PAY_CONFIG_PAY_TYPE = 'pay_config_pay_type';
const CARD_DETAIL_WALLET_ORDER_RECHARGE_TYPE = 'card_detail_wallet_order_recharge_type';
const CARD_DETAIL_WALLET_ORDER_STATUS = 'card_detail_wallet_order_status';
const COMMON_USE_STATUS = 'common_use_status';
export default function InProgress({ iccid }: Props) {
    const [dataSource, setdataSource] = useState<any[]>([])
    const [total, settotal] = useState(0)
    const [pageNum, setpageNum] = useState(1)
    const [pageSize, setpageSize] = useState(12)
    const [isFull, setisFull] = useState(false)
    const [loading, setloading] = useState(false)
    const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
    useEffect(() => {
        async function fetchDictData() {
            const data = await getDict(PAY_CONFIG_PAY_TYPE,
                CARD_DETAIL_WALLET_ORDER_RECHARGE_TYPE,
                CARD_DETAIL_WALLET_ORDER_STATUS,
                COMMON_USE_STATUS);
            setDictDatas(data);
        }

        fetchDictData();
    }, []);
    useEffect(() => {
        getList(iccid, pageNum, pageSize)
    }, [iccid])
    async function getList(iccid: string, pageNum: string | number, pageSize: string | number) {
        LoadingMask.show('正在加载...');
        const res = await apiGetOrderByColumn(iccid, pageNum, pageSize)
        setdataSource(res?.data?.rows || [])
        settotal(res?.data?.total)
         LoadingMask.hide();
    }
    function handlePageAndSizeChange(page: number, size: number) {
        if (page === pageNum && size === pageSize) return;

        setpageSize(size);
        setpageNum(page);
        getList(iccid, pageNum, pageSize)
    }


    return (

        <div className='p-10 bw-100 bh-100 inProgress bg-white'>
            <Fullscreen className='bw-100 bh-100'
                onFullscreenChange={(isFull) => {
                    setisFull(isFull)
                }}
            >
                <div className="page-content m-20 bh-100 ">
                    {/* <Table
                        className="custom-table-header-bg"
                        data={dataSource}
                        style={{ height: '100%' }}
                        columns={columns}
                        pagination={false}
                        loading={loading}
                        scroll={!isFull ? { y: 350, x: 1000 } : { y: 'calc(100% - 90px)', x: 1000 }}
                        noDataElement={<Empty description={'暂无数据'} />}
                    />
                    <Pagination
                        className="pagination-block"
                        pageSizeChangeResetCurrent={false}
                        total={total || 0}
                        current={pageNum}
                        pageSize={pageSize}
                        showJumper
                        sizeCanChange
                        sizeOptions={main.defaultPageSizeOptions}
                        showTotal={(total) => `共${total}条`}
                        size="small"
                        onChange={handlePageAndSizeChange}
                    /> */}
                    {
                        dataSource?.map(item => {
                            return <div className='bg-white p-10 item-width-2 border-radius-20 mb-10'>
                                <div className='text-color-p font-size-14 line-height-30'>
                                    {item.packDetailName}
                                </div>
                                <div className='text-color-9 font-size-12  line-height-24'>
                                    卡号:{iccid}
                                </div>
                                <div className='text-color-9  font-size-12 line-height-24'>
                                    订单号:{item.id}
                                </div>
                                <div className='text-color-9  font-size-12  line-height-24'>
                                    总期数:{item.totalPhases}
                                </div>
                                <div className='text-color-9  font-size-12 line-height-24'>
                                    当前期数:{item.thisPhases}
                                </div>
                                <div className='text-color-9 font-size-12  line-height-24'>
                                    有效期:{item.startEffectTime ? dayjs(item.startEffectTime).format('YYYY-MM-DD') : ''} - {item.endEffectTime ? dayjs(item.endEffectTime).format('YYYY-MM-DD') : ''}
                                </div>
                            </div>
                        })
                    }

                </div>

            </Fullscreen>

        </div>


    );
}

